<template>
  <div>
    <span
      class="weui-switch"
      :class="{ 'weui-switch-on': isChecked }"
      :value="this.isChecked"
      @click="toggle"
      style="position: relative"
    >
      <div
        v-if="isChecked && direction.length > 0"
        style="
          width: 100%;
          height: 100%;
          position: absolute;
          padding: 0 5px;
          line-height: 20px;
          color: #fff;
          user-select: none;
        "
      >
        {{ direction[0] }}
      </div>
      <div
        v-if="!isChecked && direction.length > 0"
        style="
          width: 100%;
          height: 100%;
          position: absolute;
          padding: 0 5px;
          right: 2px;
          line-height: 22px;
          color: #7a7a7a;
          text-align: right;
          user-select: none;
        "
      >
        {{ direction[1] }}
      </div>
    </span>
  </div>
</template>
 <script>
import "../../assets/css/myswitch.css";
export default {
  name: "switchComponent",
  props: {
    checkedProps: {
      type: Boolean,
      default: true,
    },
    text: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isChecked: this.checkedProps,
      lastTime: 0,
    };
  },
  // activated(){
  //   this.value =
  // },
  mounted(){
    this.isChecked = this.checkedProps;
     // console.log("MySwitch: mounted: this.isChecked = " + this.isChecked);
   },
   computed: {
     direction() {
       if (this.text) {
         return this.text.split("|");
       } else {
         return [];
       }
     },
   },
   watch: {
     checkedProps(val) {
       this.isChecked = val;
       // console.log("MySwitch: watch: this.isChecked = " + this.isChecked);
    },
    // isChecked(val) {},
  },
  methods: {
    toggle() {
      if (this.globalFastClick()) return;
      this.isChecked = !this.isChecked;
      this.$emit("change", this.isChecked);
    },

    fastClick() {
      let nowTime = new Date().getTime();
      let timeDelta = nowTime - this.lastTime;
      console.log("timeDelta = ", timeDelta);
      if (timeDelta > 1000) {
        this.lastTime = nowTime;
        return false;
      } else {
        return true;
      }
    },
    globalFastClick() {
      let nowTime = new Date().getTime();
      let timeDelta = nowTime - this.$root.lastTime;
      console.log("lastTime = ", this.$root.lastTime, "; timeDelta = ", timeDelta);
      if (timeDelta > 500) {
        this.$root.lastTime = nowTime;
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>
<style scoped>
</style>
